<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #rbg{
            width: 400px;
            height: 100px;
            margin-left: 150px;
            font-size: 150%;
            padding-top: 50px;  
            background: rgb(var(--red), var(--green), var(--blue));    
            text-align: center;
            margin-bottom: 50px;
        }
        .p{          
            margin-left: 80px;
            float: left;
            font-size: 20px;
            text-align: center;
            font-size:30px;
        }
        .adiv{
            width: 800px;
            height: 400px;
            margin: 220px 0 0 330px;
            position: relative;
        }
        :root {
            --red: 108;
            --green: 87;
            --blue: 106;
            }
            
    </style>
</head>
<body>
    <div class="adiv">
        <div id="rbg"></div>
        <div>
            <p class="p" style="color: red;"><input type="range" min="0" max="255" value="108" name="red" id="red"><br>
                <span>R</span>
            </p>
            <p class="p" style="color: green;"><input type="range" min="0" max="255" value="87" name="green" id="green"><br>
                <span>G</span>
            </p>
            <p class="p" style="color: blue;"><input type="range" min="0" max="255" value="106" name="blue" id="blue"><br>
                <span>B</span>
            </p>
        </div>
    </div>
<script>
    let div = document.getElementById('rbg');
    let input = document.getElementsByTagName('input');
    // 获取颜色数值
    let red = document.getElementById('red').value;
    let green = document.getElementById('green').value;
    let blue = document.getElementById('blue').value;   
    // 修改RGB的颜色数值
    div.innerHTML="RGB：(" + red + "," + green + "," + blue + ")"
    // 循环遍历当移动滚动条时发生的色值变化
    for (let i=0; i < input.length; i++){
        input[i].oninput = function(){
            let red = document.getElementById('red').value;
            let green = document.getElementById('green').value;
            let blue = document.getElementById('blue').value;   
            // 时实修改色值变化
            div.innerHTML="RGB：(" + red + "," + green + "," + blue + ")"  
           document.documentElement.style.setProperty('--' + this.name, this.value);            
        }
    }
</script>
</body>
</html>